<template>
    <div class="LoginContainer">
        <div style="width: 400px;position:absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #fff;border-radius: 4px;overflow: hidden;">
            <div style="height: 54px;width: 100%;background: #3194b9;box-shadow: 0 2px 5px #ffffff;color: #fff;line-height: 54px;text-indent: 20px;font-weight: bold;">
              用户权限系统登录
            </div>
            <el-row style="width: 100%;margin: 40px 0 0 15px;">
                <el-col :span="5">
                    <div class="grid-content bg-purple-dark" style="line-height: 40px;text-align: right;">
                        账&nbsp;&nbsp;&nbsp;&nbsp;号：
                    </div>
                </el-col>
                <el-col :span="17">
                    <div class="grid-content bg-purple-dark">
                        <el-input placeholder="请输入账号" style="width: 95%;" v-model="userName" clearable></el-input>
                    </div>
                </el-col>
            </el-row>
            <el-row style="width: 100%;margin: 10px 0 0 15px;">
                <el-col :span="5">
                    <div class="grid-content bg-purple-dark" style="line-height: 40px;text-align: right;">
                        密&nbsp;&nbsp;&nbsp;&nbsp;码：
                    </div>
                </el-col>
                <el-col :span="17">
                    <div class="grid-content bg-purple-dark">
                        <el-input placeholder="请输入密码" type="password" style="width: 95%;" v-model="password"
                                  clearable></el-input>
                    </div>
                </el-col>
            </el-row>

          <el-row style="width: 100%;margin: 10px  0 0 15px;">
            <el-col :span="5">
              <div class="grid-content bg-purple-dark" style="line-height: 40px;text-align: right;">
                验&nbsp;证&nbsp;码：
              </div>
            </el-col>
            <el-col :span="7">
                <el-input style="width: 150px;" placeholder="请输入验证码" v-model="decheckpass" clearable></el-input>
            </el-col>
            <el-col :span="7" :offset="3">
              <img v-if="imgUrl" :src="imgUrl"  v-model="imgUrl" @click="sendLogin" alt="" style="cursor: pointer;height: 40px;width: 100%;float: right;margin-right:10%"/>
              <span v-if="!imgUrl" @click="sendLogin" alt="" style="display: inline-block; cursor: pointer;height: 40px;line-height: 40px;font-size: 14px; width: 100%;float: right;margin-right:10%">{{imgText}}</span>
            </el-col>
          </el-row>
            <el-row style="margin-top: 30px;">
                <el-col :span="17" :offset="5">
                    <div class="grid-content bg-purple-dark" style="text-align: center;width: 97%">
                        <el-button type="primary" @click="onLogin" :loading="onLoading"  style="width: 100%;background: #3194b9">登录
                        </el-button>
                    </div>
                </el-col>
            </el-row>
          <div style="margin: 20px 30px 20px 40%;float: right">
            <span class="span_button" @click="passwordEvent(1)">忘记账号</span>
            <span class="span_button" @click="passwordEvent(2)">忘记密码</span>
          </div>
        </div>
    </div>
</template>
<script>
  import {$aos as aos, $aos} from "../../store/state";
    import {http} from "../../assets/commonjs/axios";
    import {md5} from "../../assets/commonjs/md5";

    export default {
      name:'LoginVue',
        data() {
            return {
                onLoading: false,
                userName: '',
                password: '',
                decheckpass:'',
                tokenTimeVal:'',
                token:'',
                imgUrl:'',
                imgText:'点击获取验证码',
            }
        },
        methods: {
            onLogin() {
                if (this.userName.trim() !== '' && this.password.trim() !== '' && this.decheckpass.trim() !== '') {
                    this.onLoading = true;
                    http("post", "permission/login", {
                      account: this.userName,
                      password: md5(this.password),
                      code: this.decheckpass,
                      token: this.token,
                    }).then(res => {
                      this.onLoading = false;
                      let data = res.data;
                      if (data.code === 200) {
                        $aos.getItem('sideNum').then(res=>{
                          if(res){
                            $aos.removeItem('sideNum');
                          }
                        })
                        $aos.token(data.token);
                        $aos.setItem("duty",data.data.user.duty);
                        $aos.setItem("loginData",data.data);
                        $aos.setItem("roleType", data.data.role.roleType);
                        $aos.setItem("userInfo", data.data.user);
                        $aos.account('3cd37e8b-4e93-40ed-8806-0e5f34139d2d');
                        this.$router.push({path: '/container'});
                      } else {
                        let info = data.data.data;
                        this.imgUrl = 'data:image/png;base64,' + info.image;
                        this.$message({type: "warning", message: res.data.msg})
                      }
                    }).catch(() => {
                      this.onLoading = false;
                      this.$notify.error({
                        title: '服务器异常',
                        message: '请检查网络，或者联系管理员！'
                      });
                    });
                } else {
                  if(this.userName.trim() === ''){
                    this.$message({type: "warning", message: "用户姓名不能为空！"});
                  }else if(this.password.trim() === ''){
                    this.$message({type: "warning", message: "密码不能为空！"});
                  }else if (this.decheckpass.trim() === '')
                    this.$message({type: "warning", message: "验证码不能为空！"});
                }
            },
          sendLogin(){
            let params = {};
            if (this.token !== '') {
              params.token = this.token;
            }
              http('post','permission/get_code_picture',params).then(res=>{
                let data = res.data;
                if (data.success) {
                  this.imgUrl = 'data:image/png;base64,' + data.data.image;
                  this.token = data.data.token;
                  $aos.setItem("token", data.data.token);
                }
              })
          },
          //切换到忘记密码和用户姓名页面的事件 query: {index: this.activeIndex}
          passwordEvent(val){
            $aos.account('3cd37e8b-4e93-40ed-8806-0e5f34139d2d');
            $aos.setItem('typeNmu',val)
            this.$router.push({path: '/user/login/password',name: 'password',params:{index:val}})
          },


        },
      created(){
          this.sendLogin();
      },
    }

</script>
<style scoped>
    .LoginContainer {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: url("../../assets/images/loginbg.jpg") center;
    }
  .span_button{
    padding: 10px;
    cursor: pointer;
    font-size: 14px;
  }
    .span_button:hover{
      color:#3194b9;
    }

</style>
